<template>
    <div class="app-container project-operate-container">
        <div v-if="opt != 'add'">
            <el-descriptions title="">
                <el-descriptions-item label="序号">
                    <el-tag size="medium">{{ obj != null ? obj.index : index }}</el-tag>
                </el-descriptions-item>
            </el-descriptions>
        </div>
                <el-form :model="form" ref="form" :rules="rules" label-width="100px">
                    <!-- <el-row style="margin: 10px 0px 25px 550px;">项目基本信息</el-row> -->
                    <div style="text-align: left;margin-top:0px">
                          <span style="font-size: 14px;margin: 0px 0px 0px 560px;">项目变更</span>
                    </div>
                    <el-row style="margin-top:10px">
                        <el-col :span="8">
                            <el-form-item label="项目编号" prop="projectNumber" label-width="110px">
                                <el-input v-model="form.projectNumber" placeholder="请输入项目编号"
                                disabled="true"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="项目名称" prop="projectName" label-width="110px">
                                <el-input v-model="form.projectName" placeholder="请输入项目名称"
                                    disabled="true"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="项目负责人" prop="projectLeader" label-width="110px">
                                <el-input v-model="form.projectLeader" disabled="true"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="执行人" prop="executorName" label-width="110px">
                                <el-input v-model="form.executorName" @focus="selectOpen(1)"  :readonly="readonly"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="费用" prop="sumAmount" label-width="110px">
                                <el-input v-model="form.sumAmount" disabled="true"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="阶段" prop="stageName" label-width="110px">
                                <el-input v-model="form.stageName" disabled="true"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="计划开始时间" prop="startTime" label-width="110px">
                                <el-date-picker clearable :disabled="opt == 'details'" style="width: 293px" v-model="form.startTime"
                                    type="date" value-format="yyyy-MM-dd" placeholder="请选择计划开始时间" >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="计划结束时间" prop="endTime" label-width="110px">
                                <el-date-picker clearable :disabled="opt == 'details'" style="width: 293px" v-model="form.endTime"
                                    type="date" value-format="yyyy-MM-dd" placeholder="请选择计划结束时间">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="变更说明" prop="changeNote" label-width="110px">
                                <el-input v-model="form.changeNote"  placeholder="请输入变更说明" type="textarea"
                                    :autosize="{ minRows: 3, maxRows: 4 }" :disabled="opt == 'details'"/>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <div style="text-align: left;margin-top:20px">
                          <span style="font-size: 14px;margin: 0px 0px 0px 560px;">子项目信息</span>
                    </div>
                    <!-- <el-row style="margin: 5px 0px 25px 550px;">子项目信息</el-row> -->
                        <el-table v-loading="loading" style="margin-top:10px" :data="infoSubList">
                            <el-table-column label="项目编号" align="center" prop="projectNumber" :show-overflow-tooltip="true"/>
                            <el-table-column label="项目名称" align="center" prop="projectName" width="180" :show-overflow-tooltip="true"/>
                            <el-table-column label="产品名称" align="center" prop="productName" :show-overflow-tooltip="true"/>
                            <el-table-column label="外协公司" align="center" prop="outsourcingCompany" width="220":show-overflow-tooltip="true" />
                            <el-table-column label="执行人" align="center" prop="executorName" width="120" :show-overflow-tooltip="true"/>
                            <el-table-column label="费用" align="center" prop="cost" width="80"/>
                            <el-table-column label="类型" align="center" prop="type" width="50">
                                <template slot-scope="scope">
                                    <dict-tag :options="dict.type.sub_project_type" :value="scope.row.type" />
                                </template>
                            </el-table-column>
                            <el-table-column label="计划开始时间" align="center" prop="startTime" width="100">
                                <template slot-scope="scope">
                                    <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="计划结束时间" align="center" prop="endTime" width="100">
                                <template slot-scope="scope">
                                    <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="text" icon="el-icon-s-order"
                                        @click="handleChangeSub(scope.row)" v-if="scope.row.state !='5' && scope.row.state !='4'">
                                    </el-button>
                                    <el-button size="mini" type="text" icon="el-icon-delete"
                                        @click="handleDeleteSub(scope.row)" >
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div style="text-align: left;margin-top:20px">
                          <span style="font-size: 14px;margin: 50px 0px 50px 560px;">项目变更记录</span>
                        </div>
                    <!-- <el-row style="margin: 25px 0px 25px 550px;">项目变更记录</el-row> -->
                        <el-table  style="margin-top:10px" v-loading="loading" :data="infoChangeList" >
                            <el-table-column label="项目编号" align="center" prop="projectNumber" />
                            <el-table-column label="项目名称" align="center" prop="projectName" :show-overflow-tooltip="true"/>
                            <el-table-column label="变更类型" align="center" prop="projectType" :formatter="isType"/>
                            <el-table-column label="变更内容" align="center" prop="changedContent" :show-overflow-tooltip="true"/>
                            <el-table-column label="变更说明" align="center" prop="changedNote" :show-overflow-tooltip="true"/>
                            <el-table-column label="变更人" align="center" prop="userChanged" />
                            <el-table-column label="变更时间" align="center" prop="changedTime" width="100">
                                <template slot-scope="scope">
                                    <span>{{ parseTime(scope.row.changedTime, '{y}-{m}-{d}') }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form>
                    <el-dialog :title="titleSub" :visible.sync="openSub" width="900px" append-to-body>
            <el-form ref="formSub" :model="formSub" :rules="rulesSub" label-width="100px">
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="项目编号" prop="projectNumber" label-width="110px">
                            <el-input v-model="formSub.projectNumber" placeholder="请输入项目编号" disabled="true"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">

                        <el-form-item label="项目名称" prop="projectName" label-width="110px">
                            <el-input v-model="formSub.projectName" placeholder="请输入项目名称" disabled="true"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="费用" prop="cost" label-width="110px">
                            <el-input v-model="formSub.cost" placeholder="请输入费用" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="执行人" prop="executorName" label-width="110px">
                            <el-input v-model="formSub.executorName" placeholder="点击选择执行人" @focus="selectOpen(2)"  :readonly="readonly" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="外协公司" prop="outsourcingCompany" label-width="110px">
                            <el-input v-model="formSub.outsourcingCompany" placeholder="请输入外协公司" disabled="true"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="类型" prop="type" label-width="110px">
                            <!-- <el-input v-model="formSub.type" placeholder="请输入类型" disabled="true"/> -->
                            <el-select v-model="formSub.type" disabled placeholder="请选择类型" style="width: 284px;">
                                <el-option v-for="dict in dict.type.sub_project_type" :key="dict.value" :label="dict.label"
                                    :value="dict.value" ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="产品名称" prop="productName" label-width="110px">
                            <el-input v-model="formSub.productName" placeholder="点击选择产品" disabled="true" style="width:285px;"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="阶段" prop="projectStage" label-width="110px">
                            <el-input v-model="formSub.subProjectStage" placeholder="点击选择阶段" style="width:285px;"
                            disabled="true" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="11">
                        <el-form-item label="计划开始时间" prop="startTime" label-width="110px">
                            <el-date-picker clearable v-model="formSub.startTime" type="date" value-format="yyyy-MM-dd"
                                placeholder="请选择计划开始时间" style="width: 284px;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="计划结束时间" prop="endTime" label-width="110px">
                            <el-date-picker clearable v-model="formSub.endTime" type="date" value-format="yyyy-MM-dd"
                                placeholder="请选择计划结束时间" style="width: 284px;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-col :span="24">
                        <el-form-item label="变更说明" prop="changeNote" label-width="110px">
                                <el-input v-model="formSub.changeNote"  placeholder="请输入变更说明" type="textarea"
                                    :autosize="{ minRows: 3, maxRows: 4 }" :disabled="opt == 'details'"/>
                            </el-form-item>
                        </el-col>
                </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitSubForm">保 存</el-button>
                <el-button @click="cancelSub">关 闭</el-button>
            </div>
        </el-dialog>

    <div style="text-align: center;margin-top:20px" >
        <el-button type="primary" @click="submitForm">保 存</el-button>
        <el-button @click="cancel">关 闭</el-button>
    </div>
    <select-user ref="select" :type="userType" :sign="sign" @ok="selectUser"></select-user>
    </div>
</template>
<script>
import { listChange} from "@/api/project/change";
import SelectUser from "../../system/role/selectUser.vue";
import { listSubInfo, getSubInfo, delSubInfo, getSubInfoTree, updateSubInfo } from "@/api/project/subInfo";
import {editSubState,getProjectInfo,updateProjectInfo,editProjectInfoChange,editSubProjectInfoChange,delSubProject } from "@/api/project/projectInfo";
import { id } from "@/api/system/UUID";
export default {
    name: "Change",
    components: {SelectUser},
    dicts: ['sub_project_type'],
    props: {
        opt: {
            type: String,
            default: ""
        },
        id: {
            type: String,
            default: ""
        },
        obj: {
            type: Object,
            default: null
        },
        //序号
        index: {
            type: Number,
            default: 0
        }
    },
    data() {
        var subExecutorName = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('执行人不能为空'));
            }
            return callback()
        };
        var projectExecutorName = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('执行人不能为空'));
            }
            return callback()
        };
        return {
            userId:'',
            //projectNode:"",
            infoSubList: [],
            infoChangeList:[],
            projectScheduleId:null,
            scheduleId:null,
            scheduleName:null,
            //-----
            typeShow:true,
            readonly: true,
            checkCount:0,
            isShowTab:true,
            UUID: '',
            userType: "1",
            optionData: null,
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            formSub: {},
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 弹出层标题
            title: "",
            sign: '1',
            honorShow: '0',
            // 是否显示弹出层
            open: false,
            openSub:false,
            titleSub:"",
            // 查询参数
            querySubParams: {
                projectId: null,
            },
            queryChangeParams: {
                projectId: null,
            },
            show: '',
            form:{},

            // 表单校验
            rules: {
                changeNote: [
                    { required: true, message: "变更说明不能为空", trigger: "blur" }
                ],
                startTime: [
                    { required: true, message: "计划开始时间不能为空", trigger: "change" }
                ],
                endTime: [
                    { required: true, message: "计划结束时间不能为空", trigger: "change" }
                ],
                executorName: [
                    { required: true, validator: projectExecutorName, trigger: "change" }
                ],
            },
            rulesSub: {
                cost: [
                    { required: true, message: "费用不能为空", trigger: "blur" },
                    {
                        pattern: /^[1-9]\d*$/,
                        message: "请输入正确的费用",
                        trigger: "blur"
                    }
                ],
                executorName: [
                    { required: true, validator: subExecutorName, trigger: "change" }
                ],

                startTime: [
                    { required: true, message: "计划开始时间不能为空", trigger: "change" }
                ],
                endTime: [
                    { required: true, message: "计划结束时间不能为空", trigger: "change" }
                ],
                changeNote: [
                    { required: true, message: "变更说明不能为空", trigger: "blur" }
                ],
            },
        };
    },
    created() {
        this.userId = this.$store.state.user.info.userId;
        //this.getList();
        let url = window.location.href;
        // 获取参数部分
        let params = url.split('?')[1];
        //alert(this.id)
        this.bId = this.id;
        this.handleUpdate(this.id)
        this.getSubList(this.id);
        this.getChangeList(this.id)
    },
    methods: {
        isType(row, column) {
            var status = [];
            if (row.projectType == 1) {
                status.push("子项目");
            }else {
                status.push("主项目");
            }
                return status.join("");
        },
        selectOpen(type) {
            this.show = type
            this.$refs.select.show();
        },
        selectUser(userId, userName) {
            if (this.show == '1') {//评审人
                this.$set(this.form, 'executorName', userName)
                this.$set(this.form, 'executorId', userId)
            } else if (this.show == '2') {//负责人
                this.$set(this.formSub, 'executorName', userName)
                this.$set(this.formSub, 'executorId', userId)
            }

        },
        //变更按钮
        handleChangeSub(row) {

            this.titleSub = "子项目变更";
            this.openSub = true;
            getSubInfo(row.id).then(response => {
                this.formSub = response.data;
                this.formSub.changedNote=""
            });
        },
        //加载子项目列表
        getSubList(id) {
            this.loading = true;
            this.querySubParams.projectId = id;
            listSubInfo(this.querySubParams).then(response => {
                this.infoSubList = response.rows;
                this.loading = false;
            });
        },

      // getSubInfoTree(id) {
      //
      //   getSubInfoTree(id).then(response => {
      //     this.infoSubList = response.rows;
      //     this.loading = false;
      //   });
      // },

        //加载项目变更列表
        getChangeList(id) {
            this.loading = true;
            this.queryChangeParams.projectId = id;
            listChange(this.queryChangeParams).then(response => {
                this.infoChangeList = response.rows;
                this.loading = false;
            });
        },

        getFile(data) {
            //console.log(JSON.stringify(data))
        },
        // 关闭按钮
        cancel() {
            this.open = false;
            this.reset();
            this.$emit('change');
        },
        // 取消按钮
        cancelSub() {
            //this.open = false;
            this.openSub = false;
            //this.reset();
        },

        //加载主项目信息数据
        handleUpdate(id) {
            //this.reset();
            getProjectInfo(id).then(response => {
                response.data.changedNote=""
                this.form = response.data;

            });
        },
       /** 删除按钮操作 */
       handleDeleteSub(row) {
            const ids = row.id
            var text = ''
            //alert(row.type)
            if(row.type=="2"){
                text='删除将会终止此项目，是否确认终止项目名称为"' + row.projectName + '"的子项目数据？'
            }else{
                text='删除该项目将会终止所生成的采购或合作单，是否确认终止项目名称为"' + row.projectName + '"的子项目数据？'
            }
            this.$modal.confirm(text).then(function () {
                return delSubProject(ids);
            }).then(() => {
                this.getSubList(row.projectId);
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },

        //子项目提交按钮
        submitSubForm() {
            if (new Date(this.formSub.endTime).getTime() < new Date(this.formSub.startTime).getTime()) {
                this.$message.error('计划开始时间不能大于计划结束时间！');
                return;
            }
            this.$refs["formSub"].validate(valid => {
                if (valid) {
                    editSubProjectInfoChange(this.formSub).then(response => {
                        this.$modal.msgSuccess("变更成功");
                        this.openSub = false;
                        this.getSubList(this.formSub.projectId);
                        this.getChangeList(this.form.projectId);
                    });
                }
            });
        },
        /** 主项目提交按钮 */
        submitForm() {
            if (new Date(this.form.endTime).getTime() < new Date(this.form.startTime).getTime()) {
                this.$message.error('计划开始时间不能大于计划结束时间！');
                return;
            }
            this.$refs["form"].validate(valid => {
                if(valid){
                    editProjectInfoChange(this.form).then(response => {
                        this.$modal.msgSuccess("变更成功");
                        //this.openSub = false;
                        this.getChangeList(this.form.projectId);
                        this.handleUpdate(this.id)
                    });

                }
        });
    },

        // 表单重置
        reset() {
            this.form = {
                stageDesc: null

            };
            this.resetForm("form");
        },
    }
};
</script>
<style>
/* .vue-treeselect__single-value{
  color: #c0c4cc;

}
.vue-treeselect__value-container{
    background-color: #F5F7FA;
}
.vue-treeselect__control-arrow-container{
    background-color: #F5F7FA;
} */
.project-operate-container {
  overflow-y: auto;
  overflow-x: auto;
  padding: 16px;
  max-width: 100%;
  max-height: 80vh;
  box-sizing: border-box;
}
</style>
